<template>
  <div class="aside">
    <el-menu
      router
      default-active="2"
      class="el-menu-vertical-demo"
      background-color="#2578b5"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <template v-for="(item,index) in menus">
        <el-submenu :index="index + ''" :key="index" v-if="!item.hidden">
        <template slot="title">
          <i :class="item.iconClass"></i>
          <span>{{item.name}}</span>
        </template>
        <el-menu-item-group v-for="(child,index) in item.children" :key="index">
          <el-menu-item :index="child.path">
            <i :class="child.iconClass"></i>
            {{child.name}}
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      </template>
    </el-menu>
  </div>
</template>
<script>
export default {
  data() {
    return {
      menuy: null,
    };
  },
  created() {
    this.menus = [...this.$router.options.routes];
    console.log(this.menus);
  },
  methods: {},
};
</script>
<style scoped lang="less">
.aside {
  height: 100%;
  .el-menu {
    height: 100%;
    .fa{
        margin-right: 10px;
    }
  }
  .el-submenu .el-menu-item {
    min-width: 0;
  }
}
</style>